<!-- 课程列表 组件 -->

<template>
	<!-- 组件外层大容器 -->
	<focus-box width="750" mode="col" justify="start" align="start" position="relative" bg="white">
		<!-- 选择岗位按钮容器 -->
		<focus-box height="80" :padding="[0,32]" mode="row" justify="end" align="center"
		position="absolute" right="0" top="0">
			<!-- 选择岗位按钮 -->
			<focus-box width="174" height="58" mode="row" justify="center" align="center"
			radius="29"
			:border="person==1 ? 'primary' : '#FD8B35'"
			@click="checkGangClick">
				<!-- 加号图片 - 管理人员 -->
				<image v-if="person==1" style="width:24rpx; height:24rpx; margin-right:7rpx;" src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/24/add_admin_20250624092426A041.png"></image>
				<!-- 加号图片 -->
				<image v-else style="width:24rpx; height:24rpx; margin-right:7rpx;" src="https://jsgl.zfcxjw.cq.gov.cn:28082/prod-api/profile/upload/2025/06/24/add_work_20250624092428A042.png"></image>
				<!-- 按钮文字 -->
				<focus-text
					size="24"
					:color="person==1 ? 'primary' : '#FD8B35'"
					text="选择课程"
				></focus-text>
			</focus-box>
		</focus-box>
		
		
		<!-- 循环岗位课程列表 -->
		<block v-for="(item,index) in course.list" :key="item.key">
			
			<!-- 岗位名称栏 -->
			<focus-box width="480" height="80" :padding="[0,32]"
			mode="row" justify="start" align="center">
				<!-- 左侧竖线 -->
				<focus-box width="6" height="28" :margin="[0,16,0,0]" :bg="person==1 ? 'primary' : '#FD8B35'"></focus-box>
				<!-- 岗位名称文字 -->
				<focus-text size="32" color="black" lines="1" weight="bold" :text="item.info.name"></focus-text>
			</focus-box>
			
			<!-- 课程列表容器 -->
			<focus-box width="750" mode="col" justify="start" align="center">
				
				<!-- 一个课程显示对象 -->
				<course-item v-for="(item2,index2) in item.list" :key="item2.key"
					:courseid="item2.courseId"
					:jieid="item2.jieId"
					:isLine="index2>0 ? true : false"
					:img="item2.img"
					:type="item2.isMust"
					:caption="item2.title"
					:obtained="item2.scoreGet"
					:total="item2.scoreTotal"
					:state="item2.state"
					:statxt="item2.stateTxt"
					@logintouch="onLogintouchCall"
				></course-item>
				
			</focus-box>
			<!-- 不同岗位之间的间隔 -->
			<focus-box width="10" height="8"></focus-box>
		</block>
		<!-- 底部末尾间隔 -->
		<focus-box width="100" height="80"></focus-box>
	</focus-box>
</template>

<script>
	// 接口请求文件
	import request from '@/common/js/request/course.js'; // 课程信息 相关接口
	
	/**
	 * 课程列表组件
	 * @description 课程列表组件，杜先生开发
	 * @property {String} tag 组件标识，默认：list-course
	 * @property {String,Number} person = [1|2] 身份类型，默认：2
	 *   @value 1 管理人员
	 *   @value 2 作业人员，默认
	 * @property {String} random 随机字符串
	 * @event {Function()} finished 接口请求执行完毕
	 * @event {Function()} logintouch 登录事务触发
	 * @event {Function()} realinfotouch 实名认证事务触发
	 */
	export default {
		name: 'list-course',
		props: {
			tag: { type: String, default: 'list-course' },
			person: { type: [String,Number], default: 2 },
			random: { type: String, default: null },
		},
		
		// 页面数据
		data() {
			return {
				// 课程信息
				course: {
					// 总数据列表
					list: []
				},
			}
		},
		
		// 数据监听
		watch: {
			// 随机字符串 改变了
			random: {
				handler(newV, oldV) {
					if (newV && newV.length>=6)
					{
						// 重新请求接口
						this.listInHomeReq();
					}
				},
				immediate: true,
			}
		},
		
		// 页面事件
		methods: {
			
			// ============================================= 元素事件
			// 选择岗位按钮 点击
			checkGangClick() {
				// 获取临时缓存
				var save_short = uni.$focus.varShortTime('get');
				// 如果已经登录
				if (save_short && save_short.id)
				{
					// 跳转到岗位列表页面
					uni.$focus.pageJump('/pages/sentry/index');
				}
				// 进行登录要求 回父
				else {
					this.$emit('logintouch', { "tag": this.tag });
				}
			},
			
			// 课程item对象组件回调
			onLogintouchCall() {
				// 进行登录要求 回父
				this.$emit('logintouch', { "tag": this.tag });
			},
			
			
			// ============================================= 接口请求
			// 首页课程列表
			listInHomeReq() {
				// 首页课程列表 接口请求
				request.listInHome({
					fail: () => {
						// 请求执行完毕
						this.$emit('finished', { "tag": this.tag });
					},
					success: (res) => {
						// 课程信息列表 赋值
						this.course.list = res.list;
						// 请求执行完毕
						this.$emit('finished', { "tag": this.tag });
					},
				});
			},
			
			
		},
		
	}
</script>